<template>
  <div class="small-class">
    <!-- 顶部导航 -->
    <van-sticky>
      <van-nav-bar title="宠物百科" fixed left-text="返回" left-arrow @click-left="$router.go(-1)" />
      <!--占位顶部导航 -->
      <div style="height: 46px"></div>
      <!-- 搜索框 -->
      <van-search v-model="p_name" shape="round" background="#fff" @click-left-icon="searchquery" @search="searchquery"
        placeholder="请输入搜索关键词" />
    </van-sticky>
    <!-- 萌宠种类的列表-->
    <div class="body-1">
      <van-skeleton :animate="false" v-for="item of pets"
        @click="$router.push(`/petinformation/${item.v_id}/${item.p_id}`)">
        <template #template>
          <div class="pet-sm-class" :style="{ display: 'flex', width: '100%' }">
            <van-image width="8rem" height="8rem" fit="cover" :src="URL + item.pet_img" />
            <div :style="{ flex: 1, marginLeft: '16px' }">
              <div class="contentss">
                {{ item.p_name }}
              </div>
              <div class="contents">
                {{ item.p_feature }}
              </div>
            </div>
          </div>
        </template>
      </van-skeleton>
    </div>
    <!-- 提示分割线 -->
    <div style="margin: 10px 0">
      <van-divider :style="{
        color: '#1989fa',
        borderColor: '#1989fa',
        padding: '0 16px',
      }">我是有底线的</van-divider>
    </div>
  </div>
</template>

<script setup>
import { useRoute } from "vue-router";
import { ref, onMounted, watch } from "vue";
import { indexApi } from "@/http/apis/indexApi";
import baseURL from "@/http/baseURL";

// 所有图片前缀
let URL = baseURL.UPL + "/upload/";
// 接入传递的值
let v_id = ref(useRoute().params.v_id);
let pets = ref([]); //存放传递的动物小种类
// 发送请求，将得到的小种类显示到页面上
function smallclass() {
  indexApi.smallClassify({ v_id: v_id.value }).then((res) => {
    pets.value = res.data.msg;
  });
}

onMounted(() => {
  smallclass(); //挂载到页面上
});

// 处理搜索框
const p_name = ref(null); //搜索框双向绑定的值
// 点击左侧图标执行的方法
function searchquery() {
  indexApi.querysearch({ p_name: p_name.value }).then((res) => {
    pets.value = res.data.data;
  });
}
// 监听搜索框当没有值的时候
watch(p_name, (newVal) => {
  if (newVal == "") {
    smallclass(); //重新发送获取全部数据
  }
});
</script>

<style lang="scss" scoped>
.small-class {
  background: #fff;
}

.body-1 {
  margin: 10px auto 0;
}

::v-deep(.van-image__error) {
  border-radius: 15px;
}

::v-deep(.van-image__img) {
  border-radius: 15px;
}

.pet-sm-class {
  background-color: #f7f8fa;
  border-radius: 15px;
}

.contentss {
  font-weight: bolder;
  margin: 10px 0;

  width: 100px;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contents {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  word-break: break-all;
}

.van-skeleton {
  margin-bottom: 10px;
}
</style>
